import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {path:'*',redirect:'/'},
  {
    path: '/',
    name: 'home',
    component: Home,
    children: [
      {
          path: '/home/title',
          component: () => import(/* webpackChunkName: "about" */ '../views/title.vue'),
          name: 'Title',
          meta: { title: 'home' }
      }
   ]
  },
  {
    path: '/about',
    name: 'About',
    meta: { title: '关于' },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  
  {
    path: '/zb',
    name: 'Zb',
    meta: { title: '虚拟' },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "zb" */ '../views/zb/Zb.vue'),
    children:[ 
      {
      path: '/zb/platform',
      name: 'Platform',
      meta: { title: '平台' },
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    {
      path: '/zb/allTicker',
      name: 'AllTicker',
      meta: { title: '总信息' },
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../views/zb/AllTicker.vue')
    }
    ]
  },
  {
    path: '/animations',
    name: 'Animations',
    meta: { title: '动画' },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/animations/animations.vue'),
    children: [
      {
          path: '/animations/yunsuyundong',
          component: () => import(/* webpackChunkName: "about" */ '../views/animations/yunsuyundong.vue'),
          name: 'Yunsuyundong',
          meta: { title: '匀速运动' }
      },
      {
          path: '/animations/huangdongyundong',
          component: () => import(/* webpackChunkName: "about" */ '../views/animations/huangdongyundong.vue'),
          name: 'Huangdongyundong',
          meta: { title: '缓动动画' }
      
      },
      {
          path: '/animations/opacity',
          component: () => import(/* webpackChunkName: "about" */ '../views/animations/opacity.vue'),
          name: 'Opacity',
          meta: { title: '透明度修改' }
      },
      {
          path: '/animations/duowutiyundong',
          component: () => import(/* webpackChunkName: "about" */ '../views/animations/duowutiyundong.vue'),
          name: 'Duowutiyundong',
          meta: { title: '多物体运动' }
      },
      {
          path: '/animations/offsetMalpractice',
          component: () => import(/* webpackChunkName: "about" */ '../views/animations/offsetMalpractice.vue'),
          name: 'OffsetMalpractice',
          meta: { title: 'offset问题展示' }
      },
      {
          path: '/animations/lianshiyundong',
          component: () => import(/* webpackChunkName: "about" */ '../views/animations/lianshiyundong.vue'),
          name: 'Lianshiyundong',
          meta: { title: '链式运动' }
      },
      {
          path: '/animations/tongshiyundong',
          component: () => import(/* webpackChunkName: "about" */ '../views/animations/tongshiyundong.vue'),
          name: 'Tongshiyundong',
          meta: { title: '同时运动' }
      },
      {
          path: '/animations/liandongyundong',
          component: () => import(/* webpackChunkName: "about" */ '../views/animations/liandongyundong.vue'),
          name: 'Liandongyundong',
          meta: { title: '联动运动' }
      },
      {
          path: '/animations/hengfutexiao',
          component: () => import(/* webpackChunkName: "about" */ '../views/animations/hengfutexiao.vue'),
          name: 'Hengfutexiao',
          meta: { title: '侧边栏特效' }
      },
      {
        path: '/animations/zhengpinhuadong',
        component: () => import(/* webpackChunkName: "about" */ '../views/animations/zhengpinhuadong.vue'),
        name: 'Zhengpinhuadong',
        meta: { title: '整屏滑动' }
      },
    {
      path: '/animations/xuanzhuanpan',
      component: () => import(/* webpackChunkName: "about" */ '../views/animations/xuanzhuanpan.vue'),
      name: 'Xuanzhuanpan',
      meta: { title: '大转盘' }
    },
    {
      path: '/animations/xiaodonghuaji',
      component: () => import(/* webpackChunkName: "about" */ '../views/animations/xiaodonghuaji.vue'),
      name: 'Xiaodonghuaji',
      meta: { title: '小动画集合' }
    },
   ]
  },
  {
    path: '/vuextest',
    name: 'VuexTest',
    meta: { title: 'vuex练习' },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/VuexTest.vue')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
